import { defineStore } from 'pinia';

import store from '@/store';
import designSetting from '@/setting/app-setting';

const {
  layout,
  collapsed,
  fixedHeader,
  showBreadcrumbs,
  showTabsView,
  persistentTabsView,
  dragTabsView,
  showTabsViewIcon,
  enableSearch,
  enableTheme,
  enableLang,
  enableFullscreen,
  enableLock,
  enableReload,
  enableCollapsed,
} = designSetting;

interface LayoutSettingState {
  // 布局方式
  layout: 'vertical' | 'horizontal';
  // 侧边栏收缩
  collapsed: boolean;
  // 固定顶栏
  fixedHeader: boolean;
  // 显示面包屑
  showBreadcrumbs: boolean;
  // 显示标签栏
  showTabsView: boolean;
  // 持久化标签栏
  persistentTabsView: boolean;
  // 启动拖拽标签栏
  dragTabsView: boolean;
  // 显示标签栏图标
  showTabsViewIcon: boolean;
  // 启用全局搜索
  enableSearch: boolean;
  // 启用主题切换
  enableTheme: boolean;
  // 启用语言切换
  enableLang: boolean;
  // 启用全屏
  enableFullscreen: boolean;
  // 启用锁屏
  enableLock: boolean;
  // 启用刷新
  enableReload: boolean;
  // 启用侧边栏缩放
  enableCollapsed: boolean;
}

export const useLayoutSettingStore = defineStore({
  id: 'layout-setting',
  state: (): LayoutSettingState => ({
    layout,
    collapsed,
    fixedHeader,
    showBreadcrumbs,
    showTabsView,
    persistentTabsView,
    dragTabsView,
    showTabsViewIcon,
    enableSearch,
    enableTheme,
    enableLang,
    enableFullscreen,
    enableLock,
    enableReload,
    enableCollapsed,
  }),
  getters: {},
  actions: {
    setLayout(layout: 'vertical' | 'horizontal') {
      this.layout = layout;
    },
    setCollapsed(collapsed: boolean) {
      this.collapsed = collapsed;
    },
    setFixTop(fixedHeader: boolean) {
      this.fixedHeader = fixedHeader;
    },
    setShowBreadcrumbs(showBreadcrumbs: boolean) {
      this.showBreadcrumbs = showBreadcrumbs;
    },
    setShowTabsView(showTabsView: boolean) {
      this.showTabsView = showTabsView;
    },
    setPersistentTabsView(persistentTabsView: boolean) {
      this.persistentTabsView = persistentTabsView;
    },
    setDragTabsView(dragTabsView: boolean) {
      this.dragTabsView = dragTabsView;
    },
    setShowTabsViewIcon(showTabsViewIcon: boolean) {
      this.showTabsViewIcon = showTabsViewIcon;
    },
    setEnableSearch(enableSearch: boolean) {
      this.enableSearch = enableSearch;
    },
    setEnableTheme(enableTheme: boolean) {
      this.enableTheme = enableTheme;
    },
    setEnableLang(enableLang: boolean) {
      this.enableLang = enableLang;
    },
    setEnableFullscreen(enableFullscreen: boolean) {
      this.enableFullscreen = enableFullscreen;
    },
    setEnableLock(enableLock: boolean) {
      this.enableLock = enableLock;
    },
    setEnableReload(enableReload: boolean) {
      this.enableReload = enableReload;
    },
    setEnableCollapsed(enableCollapse: boolean) {
      this.enableCollapsed = enableCollapse;
    },
  },
});

export function useLayoutSetting() {
  return useLayoutSettingStore(store);
}
